<!--
 * @Description:div匀速运动简介版
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-16 07:00:20
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>div匀速运动简介版</title>
	<style>
		.box {
			position: absolute;
			top: 100px;
			left: 0;
			width: 100px;
			height: 100px;
			background: pink;
		}
		#mn{
			position: absolute;
			top: 0;
			left: 500px;
			height: 1200px;
			width: 1px;
			background:fuchsia;			
					}
	</style>
	<script>
		window.onload = function () {
			var btn = document.getElementById("btn")
			var box = document.getElementById("box")
			var num = 0
			var timer = null
			var leader = 0
			var target=500
			btn.onclick = function () {
				timer = setInterval(() => {
					leader=leader+(target-leader)*0.73
					box.style.left=leader+"px"
				}, 30)
			}

			// btn.onclick=function(){
			// 	timer=setInterval(()=>{
			// 		num++;
			// 		if(num>=500){
			//        clearInterval(timer)
			// 		}else{
			//       box.style.left=num+"px"
			// 		}

			// 	},30)
			// }
		}
	</script>
</head>

<body>
	<div id="mn"></div>
	<div>
		初始值 leader 0 ==> 结束 target 400 <br>
		leader=leader+(target-leadet)/10<br>
	</div>
	<button id="btn">开始</button>
	<div class="box" id="box"></div>


</body>

</html>